<template>
	<view class="container">
		<view class="warp u-m-t-20 u-p-l-40">
			<view class="word">供应链公社</view>
			<view class="wordtype u-m-t-20">选择的公社类型</view>
		</view>
		<view class="warpimg u-m-t-40 u-m-b-20">
			<view class="warpimgone u-flex u-row-center">
				<image src="../../static/img/ordinarycommune.png"></image>
			</view>
			<text class="ordinary">普通公社</text>
			<text class="commune">Ordinary commune</text>
		</view>
		<view class="warpimg u-m-t-40 u-m-b-20">
			<view class="warpimgone u-flex u-row-center">
				<image src="../../static/img/fissioncommune.png"></image>
			</view>
			<text class="ordinary">裂变公社</text>
			<text class="commune">Fission commune</text>
		</view>
		<view class="warpimg u-m-t-40 u-m-b-20">
			<view class="warpimgone u-flex u-row-center">
				<image src="../../static/img/supplychaincommune.png"></image>
			</view>
			<text class="ordinary">供应链公社</text>
			<text class="commune">Supply chain commune</text>
		</view>
	</view>
</template>

<script>
</script>

<style scoped lang="scss">
	.container {
		background:#fff;
	}
	.warp {
		background: #fff;

		.word {
			font-size: 58rpx;
			color: #D1D36FF;
			font-weight: bold;
		}

		.wordtype {
			font-size: 30rpx;
			color: #9DA2B0;
		}
	}

	.warpimg {
		position: relative;

		.warpimgone image {
			width: 690rpx;
			height: 300rpx;
		}

		.ordinary {
			font-size: 48rpx;
			font-weight: bold;
			color: #FFFFFF;
			position: absolute;
			top: 10%;
			left: 10%;
		}

		.commune {
			font-size: 28rpx;
			position: absolute;
			bottom: 10%;
			left: 10%;
			color: #FFFFFF;
		}
	}
</style>
